<template>
  <div class="item1">
    <div class="breadcrumb" :gutter="24">
      {{ $t("system.iteminv") }}</div>
    <div class="content">

      <el-form ref="form" :model="formData" label-width="90px" size="small">
        <el-row :gutter="28">
          <el-col :xs="3" :sm="1" :md="1" :lg="1" :xl="1">
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4" style="padding-top:10px">
            <el-form-item :label="$t('third.item_name')">
              <el-input v-model="formData.keyword" clearable placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" style="padding-top:10px">
            <el-form-item label-width="0px">
              <el-checkbox v-model="showGt" placeholder="" clearable>{{$t('third.itemiv_showlt')}}</el-checkbox>

            </el-form-item>
          </el-col>
          <el-col :xs="3" :sm="2" :md="2" :lg="2" :xl="2" style="padding-top:10px;">
            <el-form-item label-width="0px">

            </el-form-item>
          </el-col>
          <div class="btngroup" style="padding-right:15px">
            <el-button type="primary" size="small" @click="handleSearch">{{ $t("common.query") }}</el-button>
            <el-button type="primary" size="small" @click="handleAdd()">{{ $t("common.add") }}</el-button>
            <el-button type="primary" size="small" @click="handleEdit()">{{ $t("common.edit") }}</el-button>
            <el-button type="primary" size="small" @click="handleDel()">{{ $t("common.remove") }}</el-button>
          </div>
        </el-row>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="tableAuto" v-if="!isCard">
      <el-table :data="tableData" style="width:100%" :height="height" @row-click="rowClick" border stripe
        :header-cell-style="{background:'#EAEBEC'}" v-loading="tableLoading" ref="singleTable" highlight-current-row>
        <el-table-column label="" width="50" align="center">
          <template slot-scope="scope">
            <div>
              <el-radio :label="scope.row.fid" v-model="radioId">&nbsp;</el-radio>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" :label="$t('common.number')" width="90" align="center">
          <template slot-scope="scope">
            {{table_index(scope.$index+1)}}
          </template>
        </el-table-column>

        <el-table-column prop="entId" width="120" show-overflow-tooltip :label="$t('third.equip_name')"></el-table-column>
        <el-table-column prop="itemId" show-overflow-tooltip :label="$t('third.item_name')"></el-table-column>
        <el-table-column prop="lotNo" width="120" show-overflow-tooltip :label="$t('workorder.batch_number')"></el-table-column>
        <el-table-column prop="woId" show-overflow-tooltip :label="$t('workorder.work_order_number')"></el-table-column>
        <el-table-column prop="qty" width="80" show-overflow-tooltip :label="$t('third.input_num')"></el-table-column>
        <el-table-column prop="qtyLeft" show-overflow-tooltip width="80" :label="$t('third.current_num')"></el-table-column>
        <el-table-column prop="uomId" width="80" show-overflow-tooltip :label="$t('basic.company')"></el-table-column>

        <el-table-column prop="dateInLocal" show-overflow-tooltip :label="$t('third.input_time')"></el-table-column>
        <el-table-column prop="flastModifyUserId" width="100" show-overflow-tooltip :label="$t('third.input_user')"></el-table-column>

        <el-table-column prop="lastEditComment" width="140" show-overflow-tooltip :label="$t('basic.reason')"></el-table-column>

      </el-table>
    </div>

    <div class="pagination-area">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[20, 30, 50, 100]"
        :page-size="pager.pageSize" :current-page="pager.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
      </el-pagination>
    </div>

    <el-dialog v-dialogDrag :title="title" :visible.sync="isShowDialog" :close-on-click-modal="false"
      :width="screenWidth > 1024 ? '30%' : '50%'" class="isShowDialog" :before-close="handleClose">
      <el-form :model="ruleForm" label-width="105px" ref="ruleForm" size="small" :rules="rules" :hide-required-asterisk="true">
        <el-row :gutter="35">
          <el-col :xs="24">
            <el-form-item :label="$t('third.equip_name')" prop="entId">
              <el-select v-model="ruleForm.entId" placeholder="请选择" size="small">
                <template v-for="item in equipList">
                  <el-option :key="item.value" :label="item.entName" :value="item.entName"></el-option>
                </template>

              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24">
            <el-form-item :label="$t('basic.material_category')" prop="entId">
              <el-select v-model="ruleForm.itemCls" placeholder="请选择" size="small" @change="handItemCls" :disabled="isEdit">
                <template v-for="item in itemClsList">
                  <el-option :key="item.fid" :label="item.fid" :value="item.fid"></el-option>
                </template>

              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24">
            <el-form-item :label="$t('third.item_name')" prop="entId">
              <el-select v-model="ruleForm.itemId" placeholder="请选择" size="small" @change="handItem" :disabled="isEdit">
                <template v-for="item in itemList">
                  <el-option :key="item.fid" :label="item.fid" :value="item.fid"></el-option>
                </template>

              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :xs="24">
            <el-form-item :label="$t('third.item_name')" prop="itemId">
              <el-input v-model="ruleForm.itemId" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :xs="24">
            <el-form-item :label="$t('workorder.batch_number')" prop="lotNo">
              <el-input v-model="ruleForm.lotNo" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('workorder.work_order_number')" prop="fid">
              <el-input v-model="ruleForm.woId" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('third.input_num')" prop="qty">
              <el-input v-model="ruleForm.qty" placeholder="" clearable :disabled="isEdit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('third.current_num')" :disabled="isEdit">
              <el-input v-model="ruleForm.qtyLeft" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('basic.company')" prop="uomId">
              <el-input v-model="ruleForm.uomId" placeholder="" disabled></el-input>
              <!-- <el-select v-model="ruleForm.uomId" remote filterable :remote-method="remoteMethodUomId" placeholder=""
                v-el-select-loadmore="loadMoreUomIdFun" clearable @clear="clearUomId">
                <el-option v-for="(item,index) in uomIdList" :key="index" :label="item.fid" :value="item.fid"></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('basic.reason')" prop="fid" v-if="title == '编辑来料信息'">
              <!-- <el-input v-model="ruleForm.lastEditComment" placeholder="" clearable></el-input> -->
              <el-select v-model="ruleForm.lastEditComment" placeholder="请选择" size="small" @change="handItem">
                <template v-for="item in reasonList">
                  <el-option :key="item.label" :label="item.label" :value="item.label"></el-option>
                </template>

              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="handleCreateMaterial('ruleForm')"
          :loading="loading">{{ $t("common.preservation") }}</el-button>
        <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { configure } from "@/api/configure"
export default {
  data () {
    return {
      screenWidth: document.body.clientWidth,
      height: document.body.offsetHeight - 295,
      formData: {
        keyword: "",
      },
      ruleForm: {
        fid: "",
        entId: '',
        itemId: '',
        lotNo: '',
        qty: '',
        qtyLeft: '',
        uomId: '',
        woId: '',
        lastEditComment: '',
        itemCls: '',
      },
      rules: {
        entId: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
        itemId: [{ required: true, message: '物料名称不能为空', trigger: 'blur' }],
        qty: [{ required: true, message: '录入数量不能为空', trigger: 'blur' }],
        lotNo: [{ required: true, message: '批次号不能为空', trigger: 'blur' }],
        uomId: [{ required: true, message: '单位不能为空', trigger: 'blur' }],
      },
      isShowDialog: false,
      icon: "icon-biaoge",
      title: this.$t('thrid.itemiv_add'),
      loading: false,
      tableData: [],
      tableLoading: false,
      radioId: "",
      pager: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
        field: '',
        order: ''
      },
      selectList: [{
        label: "否",
        value: "0"
      }, {
        label: "是",
        value: "1"
      }],
      reasonList: [{
        label: "盘盈",
        value: "盘盈"
      }, {
        label: "盘亏",
        value: "盘亏"
      }, {
        label: "入库增加",
        value: "入库增加"
      }, {
        label: "出库减少",
        value: "出库减少"
      }, {
        label: "损耗与报废",
        value: "损耗与报废"
      }, {
        label: "系统更正",
        value: "系统更正"
      }, {
        label: "库存转移",
        value: "库存转移"
      }],
      cardIndex: -1,
      isCard: false,
      currObj: {},
      uomIdList: [],
      equipList: [],
      itemClsList: [],
      itemList: [],
      itemListAll: [],
      showGt: true,
      isEdit: false,
    }
  },
  created () {
    this.getUomList()
    this.getItemListAll()
    this.getEquipmentList()
    this.getItemClassList()
    this.getItemClassAll()
  },
  watch: {
    screenWidth (val) {
      this.screenWidth = Number(val)
    }
  },
  mounted () {
    const that = this
    window.addEventListener('resize', function () {
      that.screenWidth = document.body.offsetWidth;
    })
  },
  methods: {
    handItem (val) {
      this.ruleForm.uomId = this.itemList.find(ii => { return ii.fid == this.ruleForm.itemId }).uomId
    },
    handItemCls (val) {
      this.getItemList(val)
      this.$set(this.ruleForm, 'itemId', '')
    },
    getItemList (val) {
      const itemCls = {
        fid: val
      }
      const param = {
        page: 1,
        size: 999,
        itemClassVo: itemCls
      }
      this.itemList = []
      configure.getItemList(param).then(res => {
        if (res.code == 200) {
          this.itemList = res.data.rows
        }
      })
    },
    getItemListAll () {
      const param = {
        page: 1,
        size: 999,
      }
      this.itemList = []
      configure.getItemList(param).then(res => {
        if (res.code == 200) {
          this.itemListAll = res.data.rows
        }
      })
    },
    getItemClassAll () {
      const param = {
        page: 1,
        size: 99,
      }
      configure.getItemClassList(param).then(res => {
        if (res.code == 200) {
          this.itemClsList = res.data.rows
        }
      }).catch(e => {
      })
    },
    getEquipmentList () {
      const param = {
        page: 1,
        size: 99,
      }

      configure.getEquipmentList(param).then(res => {
        if (res.code == 200) {
          this.equipList = res.data.rows.filter(el => el.canStore == 1)
        }
      })
    },
    // 获取计量单位列表
    getUomList () {
      const param = {
        page: 1,
        size: 9999
      }
      configure.getUomList(param).then(res => {
        if (res.code == 200) {
          this.uomIdList = res.data.rows
        }
      }).catch(e => {

      })
    },
    handleSearch () {
      this.pager.pageNum = 1
      this.getItemClassList()
    },
    getItemClassList () {
      const param = {
        itemId: this.formData.keyword,
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        field: 'dateInLocal',
        order: 'DESC',
      }
      if (this.showGt) {
        param.qtyLeft = 1
      }
      this.tableLoading = true
      configure.getItemInvList(param).then(res => {
        this.tableLoading = false
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.pager.total = res.data.total
        }
      }).catch(e => {
        this.tableLoading = false
      })
    },
    sortChange (column) {
      if (column.order === 'descending') {
        this.pager.field = column.prop
        this.pager.order = 'DESC'
      } else {
        this.pager.field = column.prop
        this.pager.order = 'ASC'
      }
      this.pager.pageNum = 1
      this.getItemClassList()
    },
    handleSizeChange (val) {
      this.pager.pageNum = 1
      this.pager.pageSize = val
      this.getItemClassList()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.getItemClassList()
    },
    handleClose () {
      this.isShowDialog = false
    },
    handleAdd () {
      this.title = this.$t('third.itemiv_add')
      this.ruleForm = {}
      try {
        this.$refs['ruleForm'].resetFields();
      } catch (e) { }
      this.isShowDialog = true
      this.isEdit = false
    },
    handleEdit () {
      if (this.radioId === '') {
        this.$message.error(this.$t('dialog.please_sel_edit'));
        return
      }
      this.title = this.$t('third.itemiv_edit')
      let copyRow = this.tableData.find(item => item.fid == this.radioId)

      let item = this.itemListAll.find(ii => ii.fid == copyRow.itemId)
      if (item != undefined) {
        let itemCls = item.itemClassVo.fid
        copyRow.itemCls = itemCls
      }

      this.ruleForm = { ...copyRow }
      this.isShowDialog = true
      this.isEdit = true
    },
    handleDel () {
      if (this.radioId === '') {
        this.$message.error('请选择要删除的数据');
        return
      }
      let that = this
      this.$customConfirm({
        content: "请确认是否删除来料记录" + this.currObj.itemId,
        onok () {
          configure.removeitemInv(that.radioId).then(res1 => {
            if (res1.code == 200) {
              that.radioId = ""
              that.getItemClassList()
              that.$message({ duration: 1000, type: 'success', message: '删除成功!' });
            } else {
              that.$message.error(res1.msg);
            }
          })
        }
      });
    },
    handleCreateMaterial (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == '新增来料信息')
            this.ruleForm.qtyLeft = this.ruleForm.qty
          const param = Object.assign({}, this.ruleForm)
          this.loading = true
          configure.createItemInvClass(param, this.title).then(res => {
            this.loading = false
            if (res.code == 200) {
              this.$refs[formName].resetFields();
              this.getItemClassList()
              this.isShowDialog = false
            }
          }).catch(e => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    handleIndex (index, row) {
      this.cardIndex = index
      this.radioId = row.fid;
    },
    rowClick (row) {
      this.radioId = row.fid;
      this.currObj = row;
      this.$refs.singleTable.setCurrentRow(row);
    },
    changePattern () {
      this.isCard = !this.isCard
      this.radioId = ''
      this.cardIndex = -1
      this.icon = this.isCard ? 'icon-qiehuan' : 'icon-biaoge'
    },
    table_index (index) {
      return (this.pager.pageNum - 1) * this.pager.pageSize + index
    },
  }
}
</script>

<style scoped>
.btngroup {
  float: right;
}
.change >>> .iconfont {
  font-size: 13px !important;
}
.titmepicker >>> .el-date-editor {
  width: 100%;
}
.titmepicker >>> .el-date-editor .el-range-separator {
  width: 8%;
}
.isShowDialog >>> .el-select {
  width: 100%;
}
.tableAuto,
.cardBox {
  clear: both;
}
.pagination-area {
  padding-top: 10px;
}
.cardBox {
  overflow-y: auto;
}
.card {
  background: #eaebec;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 3px;
}
.card p {
  font-size: 12px;
  line-height: 22px;
  transform: scale(0.9);
}
.desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title {
  font-weight: bold;
}
.selectCard {
  background: #9a89c1;
}
@media only screen and (min-width: 1200px) {
  .el-col-lg-5 {
    width: 19.83333%;
  }
}
.Desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>